
<template>
  <div class="main">
    <img src="./assets/bg.jpg" alt="" />
    <!--  -->
    <div id="app">
      <div id="nav">
        <!-- 结构 -->
        <!-- 头部 -->
        <Top />
        <!-- 内容区域 -->
        <Conent />
        <!-- 底部区域 -->
        <Button />
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import Top from "@/components/Top.vue";
import Conent from "@/views/Conent.vue";
import Button from "@/components/Button.vue";
export default {
  components: {
    Top,
    Conent,
    Button
  }
}
</script>
<style scoped lang="less">
/* scoped:不会样式渲染 */
.main {
  height: 100%;
  position: relative;
  overflow: hidden;
  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    filter: blur(80px);
  }
  #app {
    width: 1400px;
    position: relative;
    height: 100px;

    margin: 0 auto;
    margin-top: 50px;
  }
}
</style>
